<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="user-scalable=no, width=device-width,initial-scale=1.0, maximum-scale=1.0">
    <title>栅格系统布局</title>
</head>
<style type="text/css">
    .row{
        width: 100%;
    }
    /*伪元素:after的一个很重要的用法--清除浮动*/
    .row :after{
        clear: left;/*清除左浮动*/
        content: '';
        display: table;/*该元素会作为块级表格来显示（类似 <table>）*/
    }
    /*CSS3新增[attribute^=value] 选择器，用于匹配属性值以指定值开头的每个元素。*/
    [class^="col"]{
        float: left;
        background-color: #e0e0e0;
    }
    .col1{
        width: 25%;
    }
    .col2{
        width: 50%;
    }
    @media (max-width: 768px) {
        .row{
            width: 100%;
        }
        [class^="col"]{
            float: none;
            width:100%;
        }
    }
</style>
<body>
<div class="row">
    <header>页头</header>
</div>
<div class="row">
    <nav class="col1">导航</nav>
    <div class="col2">主要内容</div>
    <aside class="col1">侧边栏</aside>
</div>
<div class="row">
    <footer>页尾</footer>
</div>
</body>
</html>
